<template>
<el-container>

      <div class="messageFrom">
		<el-table :data="tableData" height="600px" border style="width: 100%">
            <el-table-column prop="ISBN" label="图书编号" width="180">
            </el-table-column>
            <el-table-column prop="bookName" label="书籍名称" width="180">
            </el-table-column>
            <el-table-column prop="author" label="作者" width="180">
            </el-table-column>
            <el-table-column prop="press" label="出版社"width="180">
            </el-table-column>
            <el-table-column prop="synopsis" label="简介" width="350">
            </el-table-column>
            <el-table-column prop="state" label="是否借出" width="80">
            </el-table-column>
        </el-table>



         <el-button type="text" @click="dialogFormVisible = true">增加书籍</el-button>

        <el-dialog title="书籍内容" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="ISBN编号" :label-width="formLabelWidth">
                    <el-input v-model="form.ISBN" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="书名" :label-width="formLabelWidth">
                    <el-input v-model="form.bookName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版社" :label-width="formLabelWidth">
                    <el-input v-model="form.press" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth">
                    <el-input v-model="form.synopsis" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评价" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
      </div>

</el-container>
	
</template>
<script>
export default {
  name: "BookSearch",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      value: "",
      input: "",
      form: {
          ISBN: '',
          bookName: '',
          author: '',
          press: '',
          synopsis: '',
          remarks: '',
          cno: '1',
          state: '0',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
    };
  },
  //   mounted: function() {
  //       this.createdAlluser()
  //   },
  created: function() {
      this.table();
  },
  methods: {
    table: function() {
      var params = new URLSearchParams();
      this.$axios({
        method: "post",
        url: "http://localhost:8080/allBook.do",
        data: params
      })
        .then(response => {
          var data = [];
          for (var i = 0; i < response.data.data.length; i++) {
            var dataone = {};
            dataone.ISBN = response.data.data[i].ISBN;
            dataone.author = response.data.data[i].author;
            dataone.borrowtime = response.data.data[i].borrowtime;
            dataone.press = response.data.data[i].press;
            dataone.bookName = response.data.data[i].bookName;
            dataone.synopsis = response.data.data[i].synopsis;
            dataone.state = response.data.data[i].state;
            if(dataone.state == false)
            {
                dataone.state = '未借出';
            }else{
                dataone.state = '已借出';
            }

            data.push(dataone);
          }
          this.tableData = data;
          console.log(response.data.data);
          console.log(response.data.code);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    inf: function() {
      console.log(this.tableData);
    },
    handleEdit(index, row) {
        console.log(index, row);
        var params = new URLSearchParams();
      params.append('username', this.$store.state.token);
      params.append('IBSN', row.ISBN);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/borrowBook.do",
        data: params
      })
        .then(response => {
          if(response.data.success == "true")
          {
            alert("借书成功");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      this.$forceUpdate();
    },
    handleDelete(index, row) {
        console.log(index, row);
          this.$alert(row.synopsis, '书本简介', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
    },
    add:function(){
        this.dialogFormVisible = false;
        var params = new URLSearchParams();
        params.append('ISBN', this.form.ISBN);
        params.append('author',this.form.author );
        params.append('bookName', this.form.bookName);
        params.append('press', this.form.press);
        params.append('synopsis', this.form.synopsis);
        params.append('Remarks', this.form.remarks);
        params.append('state', this.form.state);
        params.append('cno', this.form.cno);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/addbook.do",
        data: params
      })
        .then(response => {
          if(response.data.success == 'true')
          {
              alert("书本插入成功");
          }
          else{
              alert("不能添加书本")
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.messageFrom {
  width: 100%;
  height: 100%;
}
.content {
  width: 500px;
  height: 100%;
  max-height: 500px;
  margin: 0 auto;
}
.searchcontent{
    width: 100%;
}
.choice{
  float: left;
  width: 180px;
}
.searchinput{
    width: 250px;
    float: left;
    margin-left: 50px;
}
</style>
